<template>
  <el-menu
      :default-active="$route.name"
      router
      unique-opened
      class="sidebar"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
  >
    <!-- 只渲染当前角色有权限的那一组子路由 -->
    <el-menu-item
        v-for="route in filteredRoutes"
        :key="route.name"
        :index="route.name"
    >
      {{ route.meta.title }}
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const role = localStorage.getItem('role') || ''

// 取到我们给 name="Layout" 的那条路由的 children
const allChildren = router
    .options
    .routes
    .find(r => r.name === 'Layout')
    .children

// 过滤只有当前角色可以看到的
const filteredRoutes = computed(() =>
    allChildren.filter(route =>
        !route.meta.roles || route.meta.roles.includes(role)
    )
)
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  border-right: 1px solid #eaeff5;
}
</style>
